<template>
  <div ref="chartRef" style="height: 280px"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { departmentlist } from '../api';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const departmentData = ref([]);

  (async () => {
    try {
      const response = await departmentlist({});
      departmentData.value = response.records;
      console.log('部门数据', departmentData.value);
      setOptions({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 80,
          bottom: 30,
        },
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: departmentData.value.map((item) => item.title),
        },
        series: [
          {
            name: 'Cost',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              formatter: '{b}',
            },
            data: departmentData.value.map((item) => item.value),
          },
        ],
      });
    } catch (error) {
      console.error(error);
    }
  })();
</script>
